<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<script src="js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body div{
				margin-bottom: 1rem;
			}
		</style>
	</head>
	<body style="background: #13152a;font-size: 14px;">
		<div id="chart_1" style="width: 100%;height: 15rem"></div>	
		<div id="chart_2" style="width: 100%;height: 15rem"></div>	
		<div id="chart_3" style="width: 100%;height: 15rem"></div>	
		
		<script type="text/javascript">
			$(window).resize(function () {          //当浏览器大小变化时
				window.location.reload();
			});
			var chart_1 = echarts.init(document.getElementById("chart_1"));
			var chart_2 = echarts.init(document.getElementById("chart_2"));
			var chart_3 = echarts.init(document.getElementById("chart_3"));
//			var data = genData(50);
			var legendData = ['天仁贸易有限公司1','天仁贸易有限公司2','天仁贸易有限公司3','天仁贸易有限公司4','天仁贸易有限公司5','天仁贸易有限公司6','天仁贸易有限公司7','天仁贸易有限公司8','天仁贸易有限公司9','天仁贸易有限公司10'];
		    var seriesData = [{value:225,name:'天仁贸易有限公司1'},
						    {value:'60',name:'天仁贸易有限公司2'},
						    {value:'60',name:'天仁贸易有限公司3'},
						    {value:'60',name:'天仁贸易有限公司4'},
						    {value:'60',name:'天仁贸易有限公司5'},
						    {value:'500',name:'天仁贸易有限公司6'},
						    {value:'50',name:'天仁贸易有限公司7'},
						    {value:'50',name:'天仁贸易有限公司8'},
						    {value:'50',name:'天仁贸易有限公司9'},
						    {value:'50',name:'天仁贸易有限公司10'}];
			option1 = {
			    title : {
			        text: '前十大客户占比分析',
			        x:'center',
			        left:'10%',
			        textStyle:{
						color:"#566bfe",
						fontWeight:'normal',
					},
			    },
			    tooltip : {
			        trigger: 'item',
//			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
			    legend: {
			        type: 'scroll',
			        orient: 'horizontal',
					textStyle:{
						color:"#fff"
					},
			        right: 10,
			        bottom: 0,
			        data:legendData
			    },
			    color:['#13b3ce','#f4cc20', '#f98c55', '#f36e23', '#1ce8de','#4c4ce5',  '#0d5372', '#e0446d','#dd1b4e', '#09c67d'],
			    textStyle:{
						color:"#fff"
					},
			    series : [
			        {
			            name: '姓名',
			            type: 'pie',
			            radius : '40%',
			            center: ['50%', '50%'],
			            data: seriesData,
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
			};
			
			chart_1.setOption(option1, true);
			chart_2.setOption(option1, true);
			chart_3.setOption(option1, true);
			
		</script>
		
	</body>
</html>
